

import React from 'react'
import { useLocation,useParams } from 'react-router-dom';
//包装对象
import qs from 'qs'

export default function Music() {
    /* 
    useLocation:可以获取当前的路由地址信息
      - path：当前的路由地址
      - search：查询字符串形式的路由传参
      -state 
  */
 const location = useLocation()
 //取出可以获取当前的路由地址信息并截切多余的字符串并且包装成对象 ?user=sola&id=001
  const {user} = qs.parse(location.search.split('?')[1])
  // 接受navigate传过来的对象  
  const state = location.state
  //  /XXX   路径后边的路由参数 是Id  /001
  const {id} = useParams()
  return (
    <div>
      <p>用户名是{user}</p>
      <p>编号是params：{id}</p>
      {
        state.map((item)=>{
          return <li key={item.id} {...item}>{item.name}</li>
        })
      }
    </div>
  )
}
